<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="layui-container">
    <div class="layui-form">
        <div class="layui-input-inline">
            <input type="text" placeholder="根据商品名搜索" class="layui-input" id="mytitle">
        </div>
        <div class="layui-input-inline">
            <select id="mytype">
                <option value="">不限子类</option>
                <option th:each="type:${typeList}" th:value="${type.id}" th:text="${type.name}"></option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select id="mystate">
                <option value="">不限状态</option>
                <option value="0">准备上架</option>
                <option value="1">上架</option>
                <option value="2">下架</option>
            </select>
        </div>
        <button class="layui-btn layui-btn-normal" id="find"><i class="layui-icon">&#xe615;</i> </button>
        <button class="layui-btn layui-btn-normal addBtn" href-url=""><i class="layui-icon">&#xe61f;</i>添加商品</button>
        <button class="layui-btn layui-btn-danger" id="deleteMany"><i class="layui-icon">&#xe640;</i>批量删除</button>
    </div>
    <table id="goods" lay-filter="goods"></table>
</div>
<script th:inline="javascript">
    layui.use(['table','element','form','layer'], function() {
        var table = layui.table,
            element = layui.element,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //页面初始化
        form.render();

        /**
         * 商品表格
         */
        table.render({
            elem: '#goods'
            , url: '/goods/goodsList' //数据接口
            , page: true //开启分页
            , limit: 5
            , limits: [5]
            , id: 'goods'
            , cols: [
                [ //表头
                    {checkbox: true,width: '5%' ,fixed: 'left'}
                    ,{field: 'id', title: 'ID', width: '5%', sort: true}
                    , {field: 'name', title: '商品', width: '10%'}
                    , {field: 'title', title: '标题', width: '15%'}
                    , {field: 'price', title: '价格', width: '10%', sort: true}
                    , {field: 'num', title: '库存数', width: '10%', sort: true}
                    , {field: 'saleNum', title: '销售数', width: '10%', sort: true}
                    , {field: 'collectionNum', title: '收藏数', width: '10%', sort: true}
                    , {fixed: 'right', title: '操作', toolbar: "#bar1", width: '25%'}
                ]
            ]
        });

        /**
         * 多条件查询
         */
        $("#find").click(function () {
            reloadTable();
        })

        function reloadTable() {
            table.reload('goods',{
                where:{
                    name: $("#mytitle").val()
                    ,goodsTypeId: $("#mytype").val()
                    ,state: $("#mystate").val()
                }
            })
        }

        /**
         * 批量删除
         */
         $("#deleteMany").click(function () {
             //获取选中的行数据
             var checkData = table.checkStatus('goods').data;
             //获取选中行的id装入数组
             var ids = new Array();
             $.each(checkData,function (idx,obj) {
                 ids[idx] = obj.id;
             })
             if(ids.length>0){
                 layer.confirm('真的删除行么', function(index) {
                     $.ajax({
                         type: "POST",
                         url: "goods/deleteMany",
                         data: JSON.stringify(ids),
                         dataType: "json",
                         contentType : 'application/json;charset=utf-8',
                         success: function(data){
                             reloadTable();
                             layer.msg(data.msg);
                         }
                     });
                 })
             }else{
                 layer.msg("尚未选中任何数据行");
             }
         })

        /**
         * 去添加页面
         */
        $(".addBtn").click(function () {
            $("#content-body").load("goods/goaddoredit");
        })



        /**
         *  商品表格工具栏
         */
        table.on('tool(goods)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'view'){//查看详情
                $.ajax({
                    type: "GET",
                    url: "goods/view",
                    data: {
                        id:data.id
                    },
                    success: function(data){
                        $("#content-body").html(data)
                    }
                });
            } else if(layEvent === 'delete'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        type: "GET",
                        url: "goods/delete",
                        data: {
                            id:data.id,
                            isDelete:0
                        },
                        dataType: "json",
                        success: function(data){
                            layer.msg(data.msg);
                        }
                    });
                });
            } else if(layEvent === 'edit'){ //编辑
                $.ajax({
                    type: "GET",
                    url: "goods/goaddoredit",
                    data: {
                        id:data.id,
                    },
                    success: function(data){
                        $("#content-body").html(data);
                    }
                });
            }
        });
    })
</script>

<!--表格工具栏-->
<script type="text/html" id="bar1">
    <a class="layui-btn layui-btn-mini" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="delete">删除</a>
</script>
</body>
</html>